<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="css/editormd.min.css">
</head>

<body>
    <div class="markdown-body editormd-preview-container">
    <blockquote>
        <p>具体详情请进入官网查阅：<a href="http://requirejs.org">http://requirejs.org</a></p>
    </blockquote>
    <h2 id="h2--requirejs"><a name="一、什么是Requirejs" class="reference-link"></a><span class="header-link octicon octicon-link"></span>一、什么是Requirejs</h2><pre class="prettyprint linenums prettyprinted" style=""><ol class="linenums"><li class="L0"><code><span class="typ">RequireJS</span><span class="pln"> </span><span class="pun">是一个非常小巧的</span><span class="pln"> </span><span class="typ">JavaScript</span><span class="pln"> </span><span class="pun">模块载入框架，是</span><span class="pln"> AMD </span><span class="pun">规范最好的实现者之一。</span></code></li></ol></pre>
    <h2 id="h2--requirejs"><a name="二、为什么使用 RequireJs" class="reference-link"></a><span class="header-link octicon octicon-link"></span>二、为什么使用 RequireJs</h2>
    <p>不使用 RequireJs 之前，我们在开发前端代码时会碰到如下情况：
        <br>1) 代码臃肿
        <br> 如果页面逻辑较为复杂，需要引入多个js文件，这样会导致页面显得比较臃肿
        <br>2) 控制加载顺序
        <br> js文件之间如果存在依赖关系，我们得手动控制js文件的加载顺序。
        <br>3) 全局污染
        <br> js开发中，难免会存在相同的代码，我们可以通过面向对象的思想，将这部分代码抽离出来，放在新的js文件中。但是这种方式会出现全局污染的问题。</p>
    <p><strong>使用 RequireJs 可以解决上述的问题</strong></p>
    <h2 id="h2--requirejs-"><a name="三、RequireJs 的好处" class="reference-link"></a><span class="header-link octicon octicon-link"></span>三、RequireJs 的好处</h2>
    <p>1) 异步加载:
        <br> 异步加载 js 文件，只需手动配置js文件的依赖关系，无需控制加载顺序。</p>
    <p>2) 模块化开发:
        <br> 一个 js 文件就是一个模块，将公共代码做成一个模块。需要用到时，引入该模块，避免全局污染</p>
    <h2 id="h2--requirejs"><a name="四、使用 RequireJs" class="reference-link"></a><span class="header-link octicon octicon-link"></span>四、使用 RequireJs</h2>
    <h3 id="h3-4-1-"><a name="4.1 基础概念" class="reference-link"></a><span class="header-link octicon octicon-link"></span>4.1 基础概念</h3>
    <p>RequireJs 模块化开发中，通过 define 对模块进行定义,通过 require 进行对模块的引用。</p>
    <h3 id="h3-4-2-"><a name="4.2 案例" class="reference-link"></a><span class="header-link octicon octicon-link"></span>4.2 案例</h3>
    <p>项目目录结构如下图：</p>
    <p><img src="http://images2017.cnblogs.com/blog/542859/201708/542859-20170827133719027-1108297617.jpg" alt=""></p>
    <p>utils.js 文件源码：</p>
    <pre class="prettyprint linenums prettyprinted" style=""><ol class="linenums"><li class="L0"><code><span class="com">// 名称：utils.js</span></code></li><li class="L1"><code><span class="com">// 功能：定义模块，模块名称默认为js文件名称</span></code></li><li class="L2"><code><span class="pln">define</span><span class="pun">(</span><span class="kwd">function</span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span></code></li><li class="L3"><code><span class="pln">    </span><span class="kwd">return</span><span class="pln"> </span><span class="pun">{</span></code></li><li class="L4"><code><span class="pln">        sayHello </span><span class="pun">:</span><span class="pln"> </span><span class="kwd">function</span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span></code></li><li class="L5"><code><span class="pln">            alert</span><span class="pun">(</span><span class="str">"hello requirejs"</span><span class="pun">);</span></code></li><li class="L6"><code><span class="pln">        </span><span class="pun">}</span></code></li><li class="L7"><code><span class="pln">    </span><span class="pun">}</span></code></li><li class="L8"><code><span class="pun">});</span></code></li></ol></pre>
    <p>main.js 源码：</p>
    <pre class="prettyprint linenums prettyprinted" style=""><ol class="linenums"><li class="L0"><code><span class="com">// 名称：main.js</span></code></li><li class="L1"><code><span class="com">// 功能：引用模块</span></code></li><li class="L2"><code><span class="com">// 路径说明：默认以main.js所在目录为requirejs导入js文件的默认目录</span></code></li><li class="L3"><code><span class="kwd">require</span><span class="pun">([</span><span class="str">"app/utils"</span><span class="pun">],</span><span class="kwd">function</span><span class="pun">(</span><span class="pln">utils</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span></code></li><li class="L4"><code><span class="pln">    utils</span><span class="pun">.</span><span class="pln">sayHello</span><span class="pun">();</span></code></li><li class="L5"><code><span class="pun">});</span></code></li></ol></pre>
    <p>demo.html 源码：</p>
    <pre class="prettyprint linenums prettyprinted" style=""><ol class="linenums"><li class="L0"><code><span class="dec">&lt;!DOCTYPE html&gt;</span></code></li><li class="L1"><code><span class="tag">&lt;html</span><span class="pln"> </span><span class="atn">lang</span><span class="pun">=</span><span class="atv">"zh"</span><span class="tag">&gt;</span></code></li><li class="L2"><code><span class="tag">&lt;head&gt;</span></code></li><li class="L3"><code><span class="pln">    </span><span class="tag">&lt;meta</span><span class="pln"> </span><span class="atn">charset</span><span class="pun">=</span><span class="atv">"UTF-8"</span><span class="tag">&gt;</span></code></li><li class="L4"><code><span class="pln">    </span><span class="tag">&lt;title&gt;</span><span class="pln">Requirejs</span><span class="tag">&lt;/title&gt;</span></code></li><li class="L5"><code><span class="tag">&lt;/head&gt;</span></code></li><li class="L6"><code><span class="tag">&lt;body&gt;</span></code></li><li class="L7"><code><span class="pln">    </span><span class="com">&lt;!-- 引入 requirejs 文件，以 main.js 为函数入口 --&gt;</span></code></li><li class="L8"><code><span class="pln">    </span><span class="tag">&lt;script</span><span class="pln"> </span><span class="atn">data-main</span><span class="pun">=</span><span class="atv">"main.js"</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"text/javascript"</span><span class="pln"> </span><span class="atn">src</span><span class="pun">=</span><span class="atv">"require.js"</span><span class="tag">&gt;&lt;/script&gt;</span></code></li><li class="L9"><code><span class="tag">&lt;/body&gt;</span></code></li><li class="L0"><code><span class="tag">&lt;/html&gt;</span></code></li></ol></pre>
    <p><img src="http://images2017.cnblogs.com/blog/542859/201708/542859-20170826235851433-143101163.jpg" alt=""></p>
    <p>在html页面中，我们只引入了require.js文件，但是浏览器却加载了3个js文件。
        <br>因为，main.js作为函数调用的入口，而main.js代码中调用utils模块的sayHello方法。因此浏览器就加载了3个js文件</p>
    <h2 id="h2--requirejs-"><a name="五、Requirejs常用配置参数" class="reference-link"></a><span class="header-link octicon octicon-link"></span>五、Requirejs常用配置参数</h2>
    <p>配置参数需要用到requirejs.config()方法。</p>
    <h3 id="h3-5-1-baseurl"><a name="5.1 baseUrl" class="reference-link"></a><span class="header-link octicon octicon-link"></span>5.1 baseUrl</h3>
    <p>用于设置默认路径。</p>
    <pre class="prettyprint linenums prettyprinted" style=""><ol class="linenums"><li class="L0"><code><span class="com">// 修改main.js内容：</span></code></li><li class="L1"><code><span class="pln">requirejs</span><span class="pun">.</span><span class="pln">config</span><span class="pun">({</span></code></li><li class="L2"><code><span class="pln">  baseUrl</span><span class="pun">:</span><span class="pln"> </span><span class="str">'app'</span><span class="pun">,</span><span class="pln"> </span><span class="com">// 以 app 目录作为 requirejs 加载 js 文件的默认目录</span></code></li><li class="L3"><code><span class="pun">});</span></code></li><li class="L4"><code></code></li><li class="L5"><code><span class="kwd">require</span><span class="pun">([</span><span class="str">"utils"</span><span class="pun">],</span><span class="kwd">function</span><span class="pun">(</span><span class="pln">utils</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="com">// 将app/utils改成了utils</span></code></li><li class="L6"><code><span class="pln">    utils</span><span class="pun">.</span><span class="pln">sayHello</span><span class="pun">();</span></code></li><li class="L7"><code><span class="pun">});</span></code></li></ol></pre>
    <h3 id="h3-5-2-paths"><a name="5.2 paths" class="reference-link"></a><span class="header-link octicon octicon-link"></span>5.2 paths</h3>
    <p>用于设置模块名称和js文件路径</p>
    <pre class="prettyprint linenums prettyprinted" style=""><ol class="linenums"><li class="L0"><code><span class="pln">requirejs</span><span class="pun">.</span><span class="pln">config</span><span class="pun">({</span></code></li><li class="L1"><code><span class="pln">  baseUrl</span><span class="pun">:</span><span class="pln"> </span><span class="str">'app'</span><span class="pun">,</span><span class="pln"> </span><span class="com">// 以 app 目录作为 requirejs 加载 js 文件的默认目录</span></code></li><li class="L2"><code><span class="pln">  paths </span><span class="pun">:</span><span class="pln"> </span><span class="pun">{</span></code></li><li class="L3"><code><span class="pln">    </span><span class="com">// 下边key : value 表示 模块名称 : 模块路径</span></code></li><li class="L4"><code><span class="pln">    </span><span class="com">// 定义模块路径，浏览器不会加载 js 文件</span></code></li><li class="L5"><code><span class="pln">    </span><span class="com">// 因为 app 是默认目录，因此此处需要../ 再进入到 lib 获取 js 文件</span></code></li><li class="L6"><code><span class="pln">    </span><span class="str">"jquery"</span><span class="pln"> </span><span class="pun">:</span><span class="pln"> </span><span class="str">"../lib/jquery-2.1.4.min"</span></code></li><li class="L7"><code><span class="pln">  </span><span class="pun">}</span></code></li><li class="L8"><code><span class="pun">});</span></code></li><li class="L9"><code></code></li><li class="L0"><code><span class="kwd">require</span><span class="pun">([</span><span class="str">"utils"</span><span class="pun">,</span><span class="str">"jquery"</span><span class="pun">],</span><span class="kwd">function</span><span class="pun">(</span><span class="pln">utils</span><span class="pun">,</span><span class="pln">$</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="com">// 引入 jquery 模块，浏览器会加载 js 文件</span></code></li><li class="L1"><code><span class="pln">    console</span><span class="pun">.</span><span class="pln">log</span><span class="pun">(</span><span class="pln">$</span><span class="pun">)</span></code></li><li class="L2"><code><span class="pln">    utils</span><span class="pun">.</span><span class="pln">sayHello</span><span class="pun">();</span></code></li><li class="L3"><code><span class="pun">});</span></code></li></ol></pre>
    <p><img src="http://images2017.cnblogs.com/blog/542859/201708/542859-20170827000136996-1102630944.jpg" alt=""></p>
    <h3 id="h3-5-3-shim"><a name="5.3 shim" class="reference-link"></a><span class="header-link octicon octicon-link"></span>5.3 shim</h3>
    <p>用于设置js文件依赖关系</p>
    <pre class="prettyprint linenums prettyprinted" style=""><ol class="linenums"><li class="L0"><code><span class="pln">requirejs</span><span class="pun">.</span><span class="pln">config</span><span class="pun">({</span></code></li><li class="L1"><code><span class="pln">  baseUrl</span><span class="pun">:</span><span class="pln"> </span><span class="str">'app'</span><span class="pun">,</span><span class="pln"> </span><span class="com">// 以 app 目录作为 requirejs 加载 js 文件的默认目录</span></code></li><li class="L2"><code><span class="pln">  paths </span><span class="pun">:</span><span class="pln"> </span><span class="pun">{</span></code></li><li class="L3"><code><span class="pln">    </span><span class="com">// 下边key : value 表示 模块名称 : 模块路径</span></code></li><li class="L4"><code><span class="pln">    </span><span class="com">// 定义模块路径，浏览器不会加载 js 文件</span></code></li><li class="L5"><code><span class="pln">    </span><span class="com">// 因为 app 是默认目录，因此此处需要../ 再进入到 lib 获取 js 文件</span></code></li><li class="L6"><code><span class="pln">    </span><span class="str">"jquery"</span><span class="pln"> </span><span class="pun">:</span><span class="pln"> </span><span class="str">"../lib/jquery-2.1.4.min"</span><span class="pun">,</span></code></li><li class="L7"><code><span class="pln">    </span><span class="str">"bootstrap"</span><span class="pun">:</span><span class="pln"> </span><span class="str">"../lib/bootstrap-3.2.0.min"</span></code></li><li class="L8"><code><span class="pln">  </span><span class="pun">},</span></code></li><li class="L9"><code><span class="pln">  shim </span><span class="pun">:</span><span class="pln"> </span><span class="pun">{</span></code></li><li class="L0"><code><span class="pln">    </span><span class="str">"bootstrap"</span><span class="pln"> </span><span class="pun">:</span><span class="pln"> </span><span class="pun">{</span></code></li><li class="L1"><code><span class="pln">        deps </span><span class="pun">:</span><span class="pln"> </span><span class="pun">[</span><span class="str">"jquery"</span><span class="pun">]</span><span class="com">// bootstrap 模块依赖 jquery 模块</span></code></li><li class="L2"><code><span class="pln">    </span><span class="pun">}</span></code></li><li class="L3"><code><span class="pln">  </span><span class="pun">}</span></code></li><li class="L4"><code><span class="pun">});</span></code></li><li class="L5"><code></code></li><li class="L6"><code><span class="kwd">require</span><span class="pun">([</span><span class="str">"utils"</span><span class="pun">,</span><span class="str">"bootstrap"</span><span class="pun">],</span><span class="kwd">function</span><span class="pun">(</span><span class="pln">utils</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="com">// 引入bootstrap模块</span></code></li><li class="L7"><code><span class="pln">    utils</span><span class="pun">.</span><span class="pln">sayHello</span><span class="pun">();</span></code></li><li class="L8"><code><span class="pun">});</span></code></li></ol></pre>
    <p><img src="http://images2017.cnblogs.com/blog/542859/201708/542859-20170827000339496-1415308540.jpg" alt=""></p>
    <p><strong>先加载jquery文件再加载bootstrap文件</strong></p>
    <p><strong><em>特殊情况1：如果js文件不是通过定义define（AMD规范）编写，如：</em></strong></p>
    <pre class="prettyprint linenums prettyprinted" style=""><ol class="linenums"><li class="L0"><code><span class="com">// utils.js文件中</span></code></li><li class="L1"><code><span class="kwd">function</span><span class="pln"> sayHello</span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span></code></li><li class="L2"><code><span class="pln">    alert</span><span class="pun">(</span><span class="str">"hello requirejs"</span><span class="pun">);</span></code></li><li class="L3"><code><span class="pun">}</span></code></li></ol></pre><pre class="prettyprint linenums prettyprinted" style=""><ol class="linenums"><li class="L0"><code><span class="pln">requirejs</span><span class="pun">.</span><span class="pln">config</span><span class="pun">({</span></code></li><li class="L1"><code><span class="pln">  baseUrl</span><span class="pun">:</span><span class="pln"> </span><span class="str">'app'</span><span class="pun">,</span><span class="pln"> </span><span class="com">// 以 app 目录作为 requirejs 加载 js 文件的默认目录</span></code></li><li class="L2"><code><span class="pln">  paths </span><span class="pun">:</span><span class="pln"> </span><span class="pun">{</span></code></li><li class="L3"><code><span class="pln">    </span><span class="com">// 下边key : value 表示 模块名称 : 模块路径</span></code></li><li class="L4"><code><span class="pln">    </span><span class="com">// 定义模块路径，浏览器不会加载js文件</span></code></li><li class="L5"><code><span class="pln">    </span><span class="com">// 因为 app 是默认目录，因此此处需要../ 再进入到 lib 获取 js 文件</span></code></li><li class="L6"><code><span class="pln">    </span><span class="str">"jquery"</span><span class="pln"> </span><span class="pun">:</span><span class="pln"> </span><span class="str">"../lib/jquery-2.1.4.min"</span></code></li><li class="L7"><code><span class="pln">  </span><span class="pun">},</span></code></li><li class="L8"><code><span class="pln"> shim </span><span class="pun">:</span><span class="pln"> </span><span class="pun">{</span></code></li><li class="L9"><code><span class="pln">    </span><span class="str">"utils"</span><span class="pun">:</span><span class="pln"> </span><span class="pun">{</span></code></li><li class="L0"><code><span class="pln">        exports </span><span class="pun">:</span><span class="pln"> </span><span class="str">"sayHello"</span><span class="pln"> </span><span class="com">// 将 utils.js 中的 sayHello 函数作为模块暴露出来</span></code></li><li class="L1"><code><span class="pln">    </span><span class="pun">}</span></code></li><li class="L2"><code><span class="pln">  </span><span class="pun">}</span></code></li><li class="L3"><code><span class="pun">});</span></code></li><li class="L4"><code></code></li><li class="L5"><code><span class="kwd">require</span><span class="pun">([</span><span class="str">"utils"</span><span class="pun">],</span><span class="kwd">function</span><span class="pun">(</span><span class="pln">sayHello</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="com">// 引入的模块是一个函数</span></code></li><li class="L6"><code><span class="pln">    sayHello</span><span class="pun">();</span></code></li><li class="L7"><code><span class="pun">});</span></code></li></ol></pre>
    <p><strong><em>特殊情况2：非AMD规范且js文件中存在多个function函数，如：</em></strong></p>
    <pre class="prettyprint linenums prettyprinted" style=""><ol class="linenums"><li class="L0"><code><span class="com">// utils.js文件中</span></code></li><li class="L1"><code><span class="kwd">function</span><span class="pln"> sayHello</span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span></code></li><li class="L2"><code><span class="pln">    alert</span><span class="pun">(</span><span class="str">"hello requirejs"</span><span class="pun">);</span></code></li><li class="L3"><code><span class="pun">}</span></code></li><li class="L4"><code></code></li><li class="L5"><code><span class="kwd">function</span><span class="pln"> sayGoodBye</span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span></code></li><li class="L6"><code><span class="pln">    alert</span><span class="pun">(</span><span class="str">"goodbye"</span><span class="pun">);</span></code></li><li class="L7"><code><span class="pun">}</span></code></li></ol></pre><pre class="prettyprint linenums prettyprinted" style=""><ol class="linenums"><li class="L0"><code><span class="pln">requirejs</span><span class="pun">.</span><span class="pln">config</span><span class="pun">({</span></code></li><li class="L1"><code><span class="pln">  baseUrl</span><span class="pun">:</span><span class="pln"> </span><span class="str">'app'</span><span class="pun">,</span><span class="pln"> </span><span class="com">// 以 app 目录作为 requirejs 加载 js 文件的默认目录</span></code></li><li class="L2"><code><span class="pln">  paths </span><span class="pun">:</span><span class="pln"> </span><span class="pun">{</span></code></li><li class="L3"><code><span class="pln">    </span><span class="com">// 下边key : value 表示 模块名称 : 模块路径</span></code></li><li class="L4"><code><span class="pln">    </span><span class="com">// 定义模块路径，浏览器不会加载 js 文件</span></code></li><li class="L5"><code><span class="pln">    </span><span class="com">// 因为 app 是默认目录，因此此处需要../ 再进入到 lib 获取 js 文件</span></code></li><li class="L6"><code><span class="pln">    </span><span class="str">"jquery"</span><span class="pln"> </span><span class="pun">:</span><span class="pln"> </span><span class="str">"../lib/jquery-2.1.4.min"</span></code></li><li class="L7"><code><span class="pln">  </span><span class="pun">},</span></code></li><li class="L8"><code><span class="pln"> shim </span><span class="pun">:</span><span class="pln"> </span><span class="pun">{</span></code></li><li class="L9"><code><span class="pln">    </span><span class="str">"utils"</span><span class="pun">:</span><span class="pln"> </span><span class="pun">{</span></code></li><li class="L0"><code><span class="pln">        </span><span class="com">// exports : "sayHello"</span></code></li><li class="L1"><code><span class="pln">        init </span><span class="pun">:</span><span class="pln"> </span><span class="kwd">function</span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span></code></li><li class="L2"><code><span class="pln">            </span><span class="kwd">return</span><span class="pln"> </span><span class="pun">{</span></code></li><li class="L3"><code><span class="pln">                sayHello </span><span class="pun">:</span><span class="pln"> sayHello</span><span class="pun">,</span><span class="pln"> </span><span class="com">// 将 utils.js 中的 sayHello 函数转成{}对象中的 sayHello 方法，注意此处不能加引号</span></code></li><li class="L4"><code><span class="pln">                sayGoodBye </span><span class="pun">:</span><span class="pln"> sayGoodBye </span><span class="com">// 同理</span></code></li><li class="L5"><code><span class="pln">            </span><span class="pun">}</span></code></li><li class="L6"><code><span class="pln">        </span><span class="pun">}</span></code></li><li class="L7"><code><span class="pln">    </span><span class="pun">}</span></code></li><li class="L8"><code><span class="pln">  </span><span class="pun">}</span></code></li><li class="L9"><code><span class="pun">});</span></code></li><li class="L0"><code></code></li><li class="L1"><code><span class="kwd">require</span><span class="pun">([</span><span class="str">"utils"</span><span class="pun">],</span><span class="kwd">function</span><span class="pun">(</span><span class="pln">utils</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="com">// 引入的模块是一个对象</span></code></li><li class="L2"><code><span class="pln">    utils</span><span class="pun">.</span><span class="pln">sayGoodBye</span><span class="pun">();</span></code></li><li class="L3"><code><span class="pun">});</span></code></li></ol></pre>
    <h3 id="h3-5-4-map"><a name="5.4 map" class="reference-link"></a><span class="header-link octicon octicon-link"></span>5.4 map</h3>
    <p>相同的js文件，但不同的版本。可以使用该参数做映射一起使用。
        <br>应用场景： 系统升级，js文件也跟着版本升级，但是又担心js文件升级版本会导致以前的功能失效，需要2个版本的js文件都存在</p>
    <pre class="prettyprint linenums prettyprinted" style=""><ol class="linenums"><li class="L0"><code><span class="pln">requirejs</span><span class="pun">.</span><span class="pln">config</span><span class="pun">({</span></code></li><li class="L1"><code><span class="pln">  baseUrl</span><span class="pun">:</span><span class="pln"> </span><span class="str">'app'</span><span class="pun">,</span><span class="pln"> </span><span class="com">// 以 app 目录作为 requirejs 加载 js 文件的默认目录</span></code></li><li class="L2"><code><span class="pln">  map </span><span class="pun">:</span><span class="pln"> </span><span class="pun">{</span></code></li><li class="L3"><code><span class="pln">    </span><span class="str">"app/api"</span><span class="pln"> </span><span class="pun">:</span><span class="pln"> </span><span class="pun">{</span></code></li><li class="L4"><code><span class="pln">        </span><span class="str">"jquery"</span><span class="pln"> </span><span class="pun">:</span><span class="pln"> </span><span class="str">"../lib/jquery-2.1.4.min"</span></code></li><li class="L5"><code><span class="pln">    </span><span class="pun">},</span></code></li><li class="L6"><code><span class="pln">    </span><span class="str">"app/api2"</span><span class="pln"> </span><span class="pun">:</span><span class="pln"> </span><span class="pun">{</span></code></li><li class="L7"><code><span class="pln">        </span><span class="str">"jquery"</span><span class="pln"> </span><span class="pun">:</span><span class="pln"> </span><span class="str">"../lib/jquery-3.0.0.min"</span></code></li><li class="L8"><code><span class="pln">    </span><span class="pun">}</span></code></li><li class="L9"><code><span class="pln">  </span><span class="pun">}</span></code></li><li class="L0"><code><span class="pun">});</span></code></li></ol></pre><pre class="prettyprint linenums prettyprinted" style=""><ol class="linenums"><li class="L0"><code><span class="pln">app</span><span class="pun">/</span><span class="pln">api</span><span class="pun">中的模块使用</span><span class="lit">2.1</span><span class="pun">.</span><span class="lit">4</span><span class="pun">版本的文件，</span><span class="pln">app</span><span class="pun">/</span><span class="pln">api2</span><span class="pun">中的模块使用</span><span class="lit">3.0</span><span class="pun">.</span><span class="lit">0</span><span class="pun">版本的文件</span></code></li></ol></pre>
    <h3 id="h3-5-5-waitseconds"><a name="5.5 waitSeconds" class="reference-link"></a><span class="header-link octicon octicon-link"></span>5.5 waitSeconds</h3>
    <p>加载js文件等待时间，默认7秒。设置为0，禁止等待超时</p>
    <h3 id="h3-5-6-urlargs"><a name="5.6 urlArgs" class="reference-link"></a><span class="header-link octicon octicon-link"></span>5.6 urlArgs</h3>
    <p>请求js文件url后添加动态参数</p>
    <pre class="prettyprint linenums prettyprinted" style=""><ol class="linenums"><li class="L0"><code><span class="pln">requirejs</span><span class="pun">.</span><span class="pln">config</span><span class="pun">({</span></code></li><li class="L1"><code><span class="pln">  baseUrl</span><span class="pun">:</span><span class="pln"> </span><span class="str">'app'</span><span class="pun">,</span><span class="pln"> </span><span class="com">// 以 app 目录作为 requirejs 加载 js 文件的默认目录</span></code></li><li class="L2"><code><span class="pln">  paths </span><span class="pun">:</span><span class="pln"> </span><span class="pun">{</span></code></li><li class="L3"><code><span class="pln">    </span><span class="com">// 下边key : value 表示 模块名称 : 模块路径</span></code></li><li class="L4"><code><span class="pln">    </span><span class="com">// 定义模块路径，浏览器不会加载js文件</span></code></li><li class="L5"><code><span class="pln">    </span><span class="com">// 因为 app 是默认目录，因此此处需要../ 再进入到 lib 获取 js 文件</span></code></li><li class="L6"><code><span class="pln">    </span><span class="str">"jquery"</span><span class="pln"> </span><span class="pun">:</span><span class="pln"> </span><span class="str">"../lib/jquery-2.1.4.min"</span></code></li><li class="L7"><code><span class="pln">  </span><span class="pun">},</span></code></li><li class="L8"><code><span class="pln">  urlArgs</span><span class="pun">:</span><span class="pln"> </span><span class="str">"_="</span><span class="pln"> </span><span class="pun">+</span><span class="pln"> </span><span class="pun">(</span><span class="kwd">new</span><span class="pln"> </span><span class="typ">Date</span><span class="pun">()).</span><span class="pln">getTime</span><span class="pun">(),</span></code></li><li class="L9"><code><span class="pun">});</span></code></li><li class="L0"><code></code></li><li class="L1"><code><span class="kwd">require</span><span class="pun">([</span><span class="str">"utils"</span><span class="pun">],</span><span class="kwd">function</span><span class="pun">(</span><span class="pln">utils</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="com">// 引入的模块是对象</span></code></li><li class="L2"><code><span class="pln">    utils</span><span class="pun">.</span><span class="pln">sayGoodBye</span><span class="pun">();</span></code></li><li class="L3"><code><span class="pun">});</span></code></li></ol></pre>
    <p><img src="http://images2017.cnblogs.com/blog/542859/201708/542859-20170827004046339-331013384.png" alt=""></p>
    <h2 id="h2--requirejs-"><a name="六、Requirejs插件" class="reference-link"></a><span class="header-link octicon octicon-link"></span>六、Requirejs插件</h2>
    <h3 id="h3-6-1-css-"><a name="6.1 css插件" class="reference-link"></a><span class="header-link octicon octicon-link"></span>6.1 css插件</h3><pre class="prettyprint linenums prettyprinted" style=""><ol class="linenums"><li class="L0"><code><span class="pun">异步加载</span><span class="pln">css</span><span class="pun">样式表</span></code></li></ol></pre>
    <p> 下载地址: <a href="https://github.com/guybedford/require-css">https://github.com/guybedford/require-css</a></p>
    <pre class="prettyprint linenums prettyprinted" style=""><ol class="linenums"><li class="L0"><code><span class="pln">requirejs</span><span class="pun">.</span><span class="pln">config</span><span class="pun">({</span></code></li><li class="L1"><code><span class="pln">  baseUrl</span><span class="pun">:</span><span class="pln"> </span><span class="str">'app'</span><span class="pun">,</span><span class="pln"> </span><span class="com">// 以 app 目录作为 requirejs 加载 js 文件的默认目录</span></code></li><li class="L2"><code><span class="pln">  paths </span><span class="pun">:</span><span class="pln"> </span><span class="pun">{</span></code></li><li class="L3"><code><span class="pln">    </span><span class="com">// 下边key : value 表示 模块名称 : 模块路径</span></code></li><li class="L4"><code><span class="pln">    </span><span class="com">// 定义模块路径，浏览器不会加载js文件</span></code></li><li class="L5"><code><span class="pln">    </span><span class="com">// 因为 app 是默认目录，因此此处需要../ 再进入到 lib 获取 js 文件</span></code></li><li class="L6"><code><span class="pln">    </span><span class="str">"jquery"</span><span class="pln"> </span><span class="pun">:</span><span class="pln"> </span><span class="str">"../lib/jquery-2.1.4.min"</span><span class="pun">,</span></code></li><li class="L7"><code><span class="pln">    </span><span class="str">"bootstrap"</span><span class="pun">:</span><span class="str">"../lib/bootstrap-3.2.0"</span><span class="pun">,</span></code></li><li class="L8"><code><span class="pln">    </span><span class="str">"css"</span><span class="pun">:</span><span class="str">"../lib/css"</span></code></li><li class="L9"><code><span class="pln">  </span><span class="pun">},</span></code></li><li class="L0"><code><span class="pln">  shim </span><span class="pun">:</span><span class="pln"> </span><span class="pun">{</span></code></li><li class="L1"><code><span class="pln">        </span><span class="str">"bootstrap"</span><span class="pln"> </span><span class="pun">:</span><span class="pln"> </span><span class="pun">{</span></code></li><li class="L2"><code><span class="pln">            </span><span class="str">"deps"</span><span class="pln"> </span><span class="pun">:</span><span class="pln"> </span><span class="pun">[</span><span class="str">"jquery"</span><span class="pun">,</span><span class="str">"css!../css/bootstrap.min.css"</span><span class="pun">]</span><span class="pln"> </span><span class="com">// 通过 css 插件引入 css 文件，css! 固定写法，后边紧接着依赖 css 文件的路径</span></code></li><li class="L3"><code><span class="pln">        </span><span class="pun">}</span></code></li><li class="L4"><code><span class="pln">    </span><span class="pun">}</span></code></li><li class="L5"><code><span class="pun">});</span></code></li><li class="L6"><code></code></li><li class="L7"><code><span class="kwd">require</span><span class="pun">([</span><span class="str">"utils"</span><span class="pun">,</span><span class="str">"bootstrap"</span><span class="pun">],</span><span class="kwd">function</span><span class="pun">(</span><span class="pln">utils</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span></code></li><li class="L8"><code><span class="pln">    utils</span><span class="pun">.</span><span class="pln">sayHello</span><span class="pun">();</span></code></li><li class="L9"><code><span class="pun">});</span></code></li></ol></pre>
    <p><img src="http://images2017.cnblogs.com/blog/542859/201708/542859-20170827005928011-329160523.png" alt=""></p>
    <h2 id="h2--"><a name="七、补充" class="reference-link"></a><span class="header-link octicon octicon-link"></span>七、补充</h2>
    <p>requirejs通过define定义模块写法：</p>
    <h3 id="h3-7-1-"><a name="7.1 不依赖其他模块" class="reference-link"></a><span class="header-link octicon octicon-link"></span>7.1 不依赖其他模块</h3><pre class="prettyprint linenums prettyprinted" style=""><ol class="linenums"><li class="L0"><code><span class="pln">define</span><span class="pun">(</span><span class="kwd">function</span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span></code></li><li class="L1"><code><span class="pln">    </span><span class="kwd">return</span><span class="pln"> </span><span class="pun">{</span></code></li><li class="L2"><code><span class="pln">        sayHello </span><span class="pun">:</span><span class="pln"> </span><span class="kwd">function</span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span></code></li><li class="L3"><code><span class="pln">            alert</span><span class="pun">(</span><span class="str">"hello requirejs"</span><span class="pun">);</span></code></li><li class="L4"><code><span class="pln">        </span><span class="pun">}</span></code></li><li class="L5"><code><span class="pln">    </span><span class="pun">}</span></code></li><li class="L6"><code><span class="pun">});</span></code></li></ol></pre>
    <h3 id="h3-7-2-"><a name="7.2 依赖其他模块" class="reference-link"></a><span class="header-link octicon octicon-link"></span>7.2 依赖其他模块</h3><pre class="prettyprint linenums prettyprinted" style=""><ol class="linenums"><li class="L0"><code><span class="pln">define</span><span class="pun">([</span><span class="str">"jquery"</span><span class="pun">],</span><span class="kwd">function</span><span class="pun">(</span><span class="pln">$</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span></code></li><li class="L1"><code><span class="pln">    </span><span class="kwd">return</span><span class="pln"> </span><span class="pun">{</span></code></li><li class="L2"><code><span class="pln">        sayHello </span><span class="pun">:</span><span class="pln"> </span><span class="kwd">function</span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span></code></li><li class="L3"><code><span class="pln">            alert</span><span class="pun">(</span><span class="str">"hello requirejs"</span><span class="pun">);</span></code></li><li class="L4"><code><span class="pln">        </span><span class="pun">},</span></code></li><li class="L5"><code><span class="pln">        checkNumber </span><span class="pun">:</span><span class="pln"> </span><span class="kwd">function</span><span class="pun">(</span><span class="pln">num</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span></code></li><li class="L6"><code><span class="pln">            alert</span><span class="pun">(</span><span class="pln">$</span><span class="pun">.</span><span class="pln">isNumeric</span><span class="pun">(</span><span class="pln">num</span><span class="pun">));</span></code></li><li class="L7"><code><span class="pln">        </span><span class="pun">}</span></code></li><li class="L8"><code><span class="pln">    </span><span class="pun">}</span></code></li><li class="L9"><code><span class="pun">});</span></code></li></ol></pre>
    </div>
</body>

</html>
